<template>
  <div class="container">
    <div class="main">
      <div class="side-content">
        <div class="item" style="margin-bottom: 12px">
          <div class="top">
            <div style="display: flex">
              <div class="title" :class="isActive3 === '智慧船闸' ? 'active' : ''" @click="changeActive3('智慧船闸')">
                智慧船闸
              </div>
              <!-- <div class="title" :class="isActive3 === '基础数据'?'active':''" @click="changeActive3('基础数据')">基础数据</div> -->
            </div>
            <div class="more" @click="isShowMore3 = !isShowMore3" v-show="isActive3 === '智慧船闸'">
              {{ isShowMore3 === false ? "查看更多 >>" : "返回 >>" }}
            </div>
          </div>
          <div v-show="isActive3 === '智慧船闸'">
            <div v-show="isShowMore3 === false">
              <div class="count">
                <div class="count-item">
                  <div class="icon">
                    <!-- <img src="../../assets/images/large-screen/zh-one.png" alt="" /> -->
                  </div>
                  <div class="info">
                    <div class="name">全省船闸总数</div>
                    <div class="value">
                      {{ shipLockData.shipLockSum || "--" }}
                    </div>
                  </div>
                </div>
                <div class="count-item">
                  <div class="icon">
                    <!-- <img src="../../assets/images/large-screen/zh-two.png" alt="" />  -->
                  </div>
                  <div class="info">
                    <div class="name">航道部门维护船闸数</div>
                    <div class="value">
                      {{ shipLockData.departmentShipLockSum || "--" }}
                    </div>
                  </div>
                </div>
                <div class="count-item">
                  <div class="icon">
                    <!-- <img src="../../assets/images/large-screen/zh-three.png" alt="" /> -->
                  </div>
                  <div class="info">
                    <div class="name">其他部门维护船闸数</div>
                    <div class="value">
                      {{ shipLockData.localUnitShipLockSum || "--" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="pie-content">
                <div class="pie-item" style="margin-right: 4px">
                  <div class="title">船闸维护所属航道部门</div>
                  <div id="third-chart" style="height: 300px; width: 230px;left: -18px;
   top: -55px;"></div>
                </div>
                <div class="pie-item">
                  <div class="title1">过闸货源分析</div>
                  <div id="fourth-chart" style="height: 300px; width: 230px;left: 28px;
  top: -55px;"></div>
                </div>
              </div>
            </div>
            <div v-show="isShowMore3 === true">
              <div class="choice">
                <div class="tab">
                  <div class="btn" :class="currentTab === 1 ? 'active' : ''" @click="currentTabChange(1)">
                    北江船闸累计过货趋势图
                  </div>
                  <div class="btn" :class="currentTab === 2 ? 'active' : ''" @click="currentTabChange(2)">
                    北江船闸累计过闸趋势图
                  </div>
                </div>
                <div class="year">
                  <template v-if="currentTab === 1">
                    <el-select class="b" v-model="goodsYear1" placeholder="开始年份aa" @click="oldGoodsYear1 = goodsYear1"
                      @change="goodsYear1Change()" style="width: 100px">
                      <!-- goodsFirstYearList是数据来源 -->
                      <el-option v-for="item in goodsFirstYearList" :key="item" :label="item" :value="item" />
                    </el-select>
                    <span class="vs">VS</span>
                    <el-select v-model="goodsYear2" placeholder="结束年份" @click="oldGoodsYear2 = goodsYear2"
                      @change="goodsYear2Change()" style="width: 100px">
                      <el-option v-for="item in goodsSecondYearList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </template>
                  <template v-if="currentTab === 2">
                    <el-select v-model="sluiceYear1" placeholder="开始年份bb" @click="oldSluiceYear1 = sluiceYear1"
                      @change="sluiceYear1Change" style="width: 100px">
                      <el-option v-for="item in sluiceFirstYearList" :key="item" :label="item" :value="item" />
                    </el-select>
                    <span class="vs">VS</span>
                    <el-select v-model="sluiceYear2" placeholder="结束年份" @click="oldSluiceYear2 = sluiceYear2"
                      @change="sluiceYear2Change" style="width: 100px">
                      <el-option v-for="item in sluiceSecondYearList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </template>
                </div>
              </div>
              <div id="fifth-chart" style="height: 220px; width: 560px;margin-top: -28px;
    padding: 24px 8px;
"></div>
              <div class="subtitle1">船闸过闸详情</div>
              <div class="my-table  background  cell">
                <el-table :data="shipLockTableData" style="width: 100%" height="96">
                  <el-table-column prop="shipLockName" label="船闸名称" width="180" />
                  <el-table-column prop="cumulativeOverLoadedTon" label="累计过货（吨）" width="180" />
                  <el-table-column prop="passShipLockNum" label="过闸船舶总数（艘）" width="180" />
                  <el-table-column prop="upCount" label="累计上行数量（艘）" width="180" />
                  <el-table-column prop="downCount" label="累计下行数量（艘）" width="180" />
                  <el-table-column prop="averageTimePass" label="平均过闸时间（分）" width="180" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-show="isActive3 === '基础数据'">
            <div class="subtitle">船闸基础信息分析</div>
            <div class="my-table background">
              <el-table  :data="lockBaseData" style="width: 100%" height="360">
                <el-table-column prop="czbh" label="船闸编号" />
                <el-table-column prop="czmc" label="船闸名称" />
                <el-table-column prop="szhd" label="所在航道" />
                <el-table-column prop="szwz" label="所在位置" />
                <el-table-column prop="ccgg" label="尺寸规格" />
                <el-table-column prop="czjb" label="船闸等级" />
                <el-table-column prop="czlx" label="船闸类型" />
                <el-table-column prop="dqzt" label="当前状态" />
              </el-table>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div style="display: flex;">
              <div class="title" :class="isActive4 === '水位监测'?'active':''" @click="changeActive4('水位监测')">水位监测</div>
              <!-- <div class="title" :class="isActive4 === '流速流量'?'active':''" @click="changeActive4('流速流量')">流速流量</div> -->
            </div>
            <el-select v-model="waterStation" filterable placeholder="请选择" @change="changeWaterStation"
              v-show="isActive4 === '水位监测'" style="width: 200px;">
              <el-option v-for="item in waterStationData" :key="item.monitorStation" :label="item.monitorStation"
                :value="item.monitorStation" />
            </el-select>
          </div>
          <div v-show="isActive4 === '水位监测'">
            <div class="single-count">
              <div class="left">
                <div class="icon">
                  <!-- <img src="../../assets/images/large-screen/sw-one.png" alt=""> -->
                </div>
                <div class="name">水位检测站数量</div>
              </div>
              <div class="value">{{ waterlevelStationSum || "--" }}</div>
            </div>
            <div class="subtitle">水位检测趋势</div>
            <div id="tenth-chart" style="height: 300px;"></div>
          </div>
          <div v-show="isActive4 === '流速流量'">
            <div class="subtitle">流速流量信息分析</div>
            <div class="my-table background">
              <el-table   :data="lslxStaticData" style="width: 100%" height="360">
                <el-table-column prop="cHangdmc" label="所在航段" />
                <el-table-column prop="speed" label="最大流速" />
                <el-table-column prop="flow" label="流量" />
                <el-table-column prop="qylx" label="区域类型" />
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <!-- <OlArc ref="OlArcRef"></OlArc> -->

      <!-- <img src="../../assets/images/large-screen/provincialCenter1.png" alt=""> -->

      <div class="side-content">
        <div class="item" style="margin-bottom: 12px;">
          <div class="top">
            <div class="title">视频监控</div>
          </div>
          <div class="video-content">
            <div class="video-count">
              <div class="count-item" style="margin-right: 8px;">
                <!-- <img src="../../assets/images/large-screen/video-one.png" alt=""> -->
                <div class="name">已接入船闸视频</div>
                <div class="value">{{ videoNumObj.chuanzhaNum }}</div>
              </div>
              <div class="count-item">
                <!-- <img src="../../assets/images/large-screen/video-two.png" alt=""> -->
                <div class="name">已接入水上视频</div>
                <div class="value">{{ videoNumObj.shuimianNum }}</div>
              </div>
            </div>
            <div class="video-details">
              <div class="video-list">
                <el-select class="a" v-model="videoType" @change="videoTypeChange"
                  style="margin-right: 2%; width: 252px;">
                  <el-option v-for="item in videoTypeList" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
                <el-tree-select class="a" v-model="currentVideo" :data="videoCategoryData" :props="{
                    children: 'children',
                    label: 'name',
                    value: 'id'
                  }" node-key="id" :render-after-expand="false" @node-click="handleNodeClick" />
              </div>
              <div class="video">
                <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" style="object-fit: fill;width: 520px;
    height: 300px;">
                </video>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="top">
            <div class="title">航道通告</div>
          </div>
          <div class="notice" v-for="(item,index) in noticeData" :key="index">
            <div @click="handleClick(item.linkurl)">
              <div class="title">{{ item.title }}</div>
              <div class="bottom">
                <div class="source">来源：{{ item.source }}</div>
                <div class="release-time">发布时间：{{ item.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();

//引入echarts
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
} from "echarts/components";
import { LabelLayout } from 'echarts/features';
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer,
  DataZoomComponent,
  LabelLayout
]);

//引入videojs
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN', VideojsZhcnLanguage);

import errorImg from "../../assets/images/large-screen/no-image.png";

//引入api
import {
  //智慧船闸
  getShipLockNum,
  getShipLockRate,
  goodsAnalysisChart,
  getYearList,
  analysisData,
  getShipLockDetail,
  //全省数据
  getProvinceWaterwayData,
  //桥梁净高监测
  regionChart,
  clearHeightDetail,
  getAllBridge,
  clearHeightTrendChart,
  //水位监测详情
  waterlevelDetail,
  getWaterStation,
  trendChart,
  //视频监控
  getVideoNum,
  videoCategory,
  playVideo,
  //航道通告
  getWaterwayNoticeThree,
  //桥梁动态通航净高数据
  clearHeightTrendChartStatic,
  //流量流速
  lslxStatic,
} from "@/bridge-h5/utils/apis";

//地图
import OlArc from "./olArcChannel.vue";
const OlArcRef = ref(null);
//智慧船闸
const isShowMore3 = ref(false);
const shipLockData = ref({});
const getShipLockNumFn = () => {
  getShipLockNum().then((res) => {
    if (res.code === 200 && res.data.length) {
      shipLockData.value = res.data[0];
    }
  });
};
const seriesThirdData = ref([]);
const getShipLockRateFn = () => {
  getShipLockRate().then((res) => {
    if (res.code === 200 && res.data.length) {
      let arr = [];
      for (let i = 0; i < res.data.length; i++) {
        let el = res.data[i];
        let obj = {};
        obj.name = el.region;
        obj.value = el.maintenanceOfShiplock;
        obj.rate = el.maintenanceShipLocksRate;
        arr.push(obj);
      }
      seriesThirdData.value = arr;
      initThirdChart();
    }
  });
};
const initThirdChart = () => {
  nextTick(() => {
    let thirdChart = echarts.getInstanceByDom(
      document.getElementById("third-chart")
    );
    if (thirdChart != null && thirdChart != "" && thirdChart != undefined) {
      thirdChart.dispose();
    }
    thirdChart = echarts.init(document.getElementById("third-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
        formatter: "{b} : {c}个",
      },
      legend: {
        type: "scroll",
        itemWidth: 8,
        itemHeight: 8,
        icon: 'circle',
        left: "center",
        bottom: '5%',
      },
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          radius: ["60%", "70%"], //设置成环状
          selectedMode: "single", //设置饼图的选中模式为单选模式
          data: seriesThirdData.value,
          label: {
            show: false, //每个扇区上显示文字标签
            formatter: "{b}\n{c}个",
            color: "#FFFFFF",
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          labelLine: {
            show: false, //标签连接线
          },
        },
      ],
    };
    option && thirdChart.setOption(option);
  });
};
const seriesFourthData = ref([]);
const goodsAnalysisChartFn = () => {
  goodsAnalysisChart("年", new Date().getFullYear() - 1).then((res) => {
    seriesFourthData.value = [];
    if (res.code === 200 && res.data) {
      let arr = [];
      let colorData = [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(0, 81, 255, 1)" }, // 顶部
          { offset: 1, color: "rgba(0, 81, 255, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(42, 139, 253, 1)" }, // 顶部
          { offset: 1, color: "  rgba(42, 139, 253, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(42, 139, 253, 1)" }, // 顶部
          { offset: 1, color: "rgba(42, 139, 253, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(102, 216, 138, 1)" }, // 顶部
          { offset: 1, color: "rgba(102, 216, 138, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(203, 30, 232, 1)" }, // 顶部
          { offset: 1, color: "rgba(203, 30, 232, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(155, 88, 238, 1)" }, // 顶部
          { offset: 1, color: "rgba(155, 88, 238, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(255, 199, 51, 1)" }, // 顶部
          { offset: 1, color: "rgba(255, 199, 51, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(255, 138, 0, 1)" }, // 顶部
          { offset: 1, color: "rgba(255, 138, 0, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(241, 57, 57, 1)" }, // 顶部
          { offset: 1, color: "rgba(241, 57, 57, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(255, 113, 170, 1)" }, // 顶部
          { offset: 1, color: "rgba(255, 113, 170, 0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(24, 225, 225, 1)" }, // 顶部
          { offset: 1, color: "rgba(24, 225, 225,0.2)" }, // 底部
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(26, 195, 247, 1)" }, // 顶部
          { offset: 1, color: "rgba(26, 195, 247, 1)" }, // 底部
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(12, 193, 128, 1)" }, // 顶部
          { offset: 1, color: "rgba(12, 193, 128, 0.2)" }, // 底部
        ]), "#99cdff",
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(255, 138, 0, 1)" }, // 顶部
          { offset: 1, color: "rgba(255, 138, 0, 0.2)" }, // 底部
        ]),
        "#C8778E",
        "#D4B6F4",
        "#8F7059",
        "#EDD18C",
        "#CA3F54",
        "#01448B",
        "#165dff",
        "#FFFF33",
        "#B22222",
        "#FFB6C1",
        "#4B0082",
        "#DDA0DD",
        "#E6E6FA",
        "#F08080",
        "#483D8B",
        "#40E0D0",
        "#330033",
        "#996666",
        "#996699",
        "#EE0000",
        "#6666FF",
        "#660099",
        "#666699",
        "#0000FF",
        "#FF9933",
        "#CC33CC",
        "#003333",
      ];
      res.data.cargoType.forEach((item, index) => {
        let obj = {};
        obj.name = item;
        obj.value = res.data.cargoPrecent[index];
        obj.itemStyle = {
          color: colorData[index],
        };
        arr.push(obj);
      });
      let other = {};
      arr.forEach((item, index) => {
        if (item.name === "其他") {
          other = item;
          arr.splice(index, 1);
          return;
        }
      });
      arr.push(other);
      seriesFourthData.value = arr;
      initFourthChart();
    }
  });
};
const initFourthChart = () => {
  nextTick(() => {
    let fourthChart = echarts.getInstanceByDom(
      document.getElementById("fourth-chart")
    );
    if (fourthChart != null && fourthChart != "" && fourthChart != undefined) {
      fourthChart.dispose();
    }
    fourthChart = echarts.init(document.getElementById("fourth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
        formatter: "{b} : {c}%",
      },

      legend: {
        type: "scroll",
        itemWidth: 8,
        itemHeight: 8,
        icon: 'circle',
        bottom: 14,
      },
      grid: {
        top: '25%',
        bottom: '10%', // 确保这个值足够大
        left: '5%',
        right: '5%',
      },
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          radius: ["60%", "70%"], //设置成环状
          selectedMode: "single",
          data: seriesFourthData.value,
          label: {
            show: false, //每个扇区上显示文字标签
            formatter: "{b}\n{c}%",
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          labelLine: {
            show: false, //标签连接线
          },
        },
      ],
    };5
    option && fourthChart.setOption(option);
  });
};
const currentTab = ref(1);
const currentTabChange = (val) => {
  currentTab.value = val;
  if (val === 1) {
    analysisDataFn1();
  } else if (val === 2) {
    analysisDataFn2();
  }
};
const goodsYear1 = ref("");
const oldGoodsYear1 = ref("");
const goodsFirstYearList = ref([]);
const goodsYear2 = ref("");
const oldGoodsYear2 = ref("");
const goodsSecondYearList = ref([]);
const goodsYear1Change = () => {
  if (goodsYear1.value.slice(0, 4) > goodsYear2.value.slice(0, 4)) {
    ElMessage({
      message: "开始年份不能大于结束年份",
      type: "warning",
    });
    goodsYear1.value = oldGoodsYear1.value;
    return;
  }
  analysisDataFn1();
};
const goodsYear2Change = (val) => {
  if (goodsYear2.value.slice(0, 4) < goodsYear1.value.slice(0, 4)) {
    ElMessage({
      message: "结束年份不能小于开始年份",
      type: "warning",
    });
    goodsYear2.value = oldGoodsYear2.value;
    return;
  }
  analysisDataFn1();
};
const seriesFifthData1 = ref([]);
const analysisDataFn1 = () => {
  analysisData(goodsYear1.value.slice(0, 4), goodsYear2.value.slice(0, 4)).then(
    (res) => {
      if (res.code === 200 && res.data) {
        let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let arr3 = ["", "", "", "", "", "", "", "", "", "", "", ""];
        let monthData = [];
        res.data.monthList.forEach((item) => {
          let month =
            item.slice(0, 1) == "0"
              ? item.slice(1, 2) - 1
              : item.slice(0, 2) - 1;
          monthData.push(month);
        });
        monthData.forEach((item, index) => {
          res.data.goodsSumYear1.forEach((item1, index1) => {
            if (index === index1) {
              arr1[item] = item1;
            }
          });
          res.data.goodSumYear2.forEach((item2, index2) => {
            if (index === index2) {
              arr2[item] = item2;
            }
          });
          res.data.goodsGrowThrate.forEach((item3, index3) => {
            if (index === index3) {
              arr3[item] = item3;
            }
          });
        });
        seriesFifthData1.value = [
          {
            name: `${goodsYear1.value}累积`,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " 吨";
                }
              },
              confine: true, //限制在图表区域内
            },
            barWidth: 8,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     { offset: 0, color: "rgba(0, 81, 255, 1)" }, // 顶部
      { offset: 1, color: "rgba(0, 81, 255, 0.2)" }, // 底部
                ]),
            },
            data: arr1,
          },
          {
            name: `${goodsYear2.value}累积`,
            type: "bar",
          
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " 吨";
                }
              },
              confine: true, //限制在图表区域内
            },
            barWidth: 8,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     { offset: 0, color: "rgba(255, 199, 51, 1)" }, // 顶部
      { offset: 1, color: "rgba(255, 199, 51, 1)" }, // 底部
                ]),
            },
            data: arr2,
          },
          {
            name: `${goodsYear2.value}同比增长率`,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " %";
                }
              },
              confine: true, //限制在图表区域内
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
     { offset: 0, color: "rgba(255, 115, 0, 1)" }, // 顶部
      { offset: 1, color: "rgba(255, 115, 0, 0.2)" }, // 底部
                ]),
            },
            data: arr3,
          },
        ];
        initFifthChart1();
      }
    }
  );
};
const initFifthChart1 = () => {
  nextTick(() => {
    let fifthChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (fifthChart != null && fifthChart != "" && fifthChart != undefined) {
      fifthChart.dispose();
    }
    fifthChart = echarts.init(document.getElementById("fifth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemHeight: 8,
        itemWidth: 8,
        icon: 'rect',
        bottom: 0,
    
      },
      grid: {
        top: "15%",
        left: "5%",
        right: "15%",
        bottom: "10%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval: 0,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "货物量（吨）",
          nameTextStyle: {
            padding: [0, 0, 0, -50],
          },
          axisLabel: {
            interval: 0,
          },
        },
        {
          type: "value",
          name: "增长率",
          axisLabel: {
            formatter: "{value} %",
          },
          nameTextStyle: {
            padding: [0, -40, 0, 0],
          },
        },
      ],
      series: seriesFifthData1.value,
    };
    option && fifthChart.setOption(option);
  });
};
const sluiceYear1 = ref("");
const oldSluiceYear1 = ref("");
const sluiceFirstYearList = ref([]);
const sluiceYear2 = ref("");
const oldSluiceYear2 = ref("");
const sluiceSecondYearList = ref([]);
const sluiceYear1Change = () => {
  if (sluiceYear1.value.slice(0, 4) > sluiceYear2.value.slice(0, 4)) {
    ElMessage({
      message: "开始年份不能大于结束年份",
      type: "warning",
    });
    sluiceYear1.value = oldSluiceYear1.value;
    return;
  }
  analysisDataFn2();
};
const sluiceYear2Change = (val) => {
  if (sluiceYear2.value.slice(0, 4) < sluiceYear1.value.slice(0, 4)) {
    ElMessage({
      message: "结束年份不能小于开始年份",
      type: "warning",
    });
    sluiceYear2.value = oldSluiceYear2.value;
    return;
  }
  analysisDataFn2();
};
const seriesFifthData2 = ref([]);
const analysisDataFn2 = () => {
  analysisData(
    sluiceYear1.value.slice(0, 4),
    sluiceYear2.value.slice(0, 4)
  ).then((res) => {
    if (res.code === 200 && res.data) {
      let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let arr3 = ["", "", "", "", "", "", "", "", "", "", "", ""];
      let monthData = [];
      res.data.monthList.forEach((item) => {
        let month =
          item.slice(0, 1) == "0" ? item.slice(1, 2) - 1 : item.slice(0, 2) - 1;
        monthData.push(month);
      });
      monthData.forEach((item, index) => {
        res.data.shipPassSumYear1.forEach((item1, index1) => {
          if (index === index1) {
            arr1[item] = item1;
          }
        });
        res.data.shipPassSumYear2.forEach((item2, index2) => {
          if (index === index2) {
            arr2[item] = item2;
          }
        });
        res.data.shipPassGrowThrate.forEach((item3, index3) => {
          if (index === index3) {
            arr3[item] = item3;
          }
        });
      });
      seriesFifthData2.value = [
        {
          name: `${sluiceYear1.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " 艘";
              }
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: "#6B9BFD",
          },
          data: arr1,
        },
        {
          name: `${sluiceYear2.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " 艘";
              }
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: "#6FE1B2",
          },
          data: arr2,
        },
        {
          name: `${sluiceYear2.value}同比增长率`,
          type: "bar",
          // yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " %";
              }
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: "#FFA257",
          },
          data: arr3,
        },
      ];
      initFifthChart2();
    }
  });
};
const initFifthChart2 = () => {
  nextTick(() => {
    let fifthChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (fifthChart != null && fifthChart != "" && fifthChart != undefined) {
      fifthChart.dispose();
    }
    fifthChart = echarts.init(document.getElementById("fifth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemHeight: 8,
        itemWeight: 8,
        icon: 'rect'
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval: 0,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "过闸船舶数（艘）",
          axisLabel: {
            interval: 0,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.2,
            },
          },
        },
        {
          type: "value",
          name: "增长率",
          axisLabel: {
            formatter: "{value} %",
          },
          nameTextStyle: {
            padding: [0, -40, 0, 0],
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.2,
            },
          },
        },
      ],
      series: seriesFifthData2.value,
    };

    option && fifthChart.setOption(option);
  });
};
const shipLockTableData = ref([]);
const getShipLockDetailFn = () => {
  getShipLockDetail("年", new Date().format("yyyy")).then((res) => {
    if (res.code === 200 && res.data.length) {
      shipLockTableData.value = res.data;
    }
  });
};
const isActive3 = ref("智慧船闸");
const changeActive3 = (val) => {
  isActive3.value = val;
};
//桥梁净高监测
const isShowMore5 = ref(false);
const departBridgeTotal = ref('');
const xAxisEighthData = ref([]);
const seriesEighthData = ref([]);
const regionChartFn = () => {
  regionChart().then((res) => {
    if (res.code === 200 && res.data.length) {
      departBridgeTotal.value = res.data[0].departBridgeTotal;
      let data = res.data[0].regionBridgeTotal;
      data.forEach((item) => {
        xAxisEighthData.value.push(item.regionName);
        seriesEighthData.value.push(item.regionBridgeTotal);
      });
      initEighthChart();
    }
  });
};
const initEighthChart = () => {
  let eighthChart = echarts.getInstanceByDom(document.getElementById("eighth-chart"));
  if (eighthChart != null && eighthChart != "" && eighthChart != undefined) {
    eighthChart.dispose();
  }
  eighthChart = echarts.init(document.getElementById('eighth-chart'));

  let option;
  option = {
    tooltip: {
      trigger: 'axis',
      confine: true, //限制在图表区域内
    },
    grid: {
      top: '15%',
      left: '5%',
      right: '15%',
      bottom: '5%',
      containLabel: true
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        zoomLock: false,
      },
    ],
    xAxis: {
      type: 'category',
      name: '区域中心',
      data: xAxisEighthData.value,
      axisTick: {
        alignWithLabel: true, //控制刻度线是否与刻度标签对齐
        show: false, //是否显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      name: '数量',
      nameTextStyle: {
        padding: [0, 30, 0, 0]
      },
    },
    series: [
      {
        name: '等级航道桥梁',
        data: seriesEighthData.value,
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          color: '#0051FF'
        },
        label: {
          show: true,
          position: 'top',
        },
      }
    ]
  };
  option && eighthChart.setOption(option);
};
const clearHeightBridgeInstallSum = ref('');
const clearHeightDetailFn = () => {
  clearHeightDetail("", "", "").then((res) => {
    if (res.code === 200 && res.data.length) {
      clearHeightBridgeInstallSum.value = res.data[0].clearHeightBridgeInstallSum;
    }
  });
};
const bridge = ref("");
const regionName = ref("");
const bridgeData = ref([]);
const getAllBridgeFn = () => {
  getAllBridge().then((res) => {
    if (res.code === 200 && res.data.length) {
      bridge.value = res.data[0].bridgeName;
      regionName.value = res.data[0].regionName;
      bridgeData.value = res.data;
      clearHeightTrendChartFn();
      // clearHeightTrendChartStaticFn();
    }
  });
};
const changeBridge = (value) => {
  bridge.value = value;
  bridgeData.value.forEach((item) => {
    if (value === item.bridgeName) {
      regionName.value = item.regionName;
      clearHeightTrendChartFn();
      // clearHeightTrendChartStaticFn();
    }
  });
};
//全省数据
const provinceWaterwayData = ref({});
const getProvinceWaterwayDataFn = () => {
  getProvinceWaterwayData().then((res) => {
    if (res.code === 200 && res.data.length) {
      provinceWaterwayData.value = res.data[0];
    }
  });
};
const upClearHeight = ref('');
const baseApi = `${import.meta.env.VITE_APP_BASE_API}attach/img`
const bridgeImage = ref('');
const xAxisNinthData = ref([]);
const seriesNinthData = ref([]);
const clearHeightTrendChartFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  clearHeightTrendChart(bridge.value, regionName.value, new Date(endTime).format('yyyy-MM-dd'), new Date(time).format('yyyy-MM-dd')).then((res) => {
    if (res.code === 200 && res.data.length) {
      let data = res.data[0];
      upClearHeight.value = data.upClearHeight;
      if (data.bridgeImage != null && data.bridgeImage != '' && data.bridgeImage != undefined) {
        bridgeImage.value = data.bridgeImage.split('img')[1];
      }
      xAxisNinthData.value = [];
      seriesNinthData.value = [];

      if (data.clearHeightHistoryData.length) {
        let chartData = sortClass(data.clearHeightHistoryData);
        if (chartData.length === 1) {
          let arr = [];
          chartData[0].forEach((item) => {
            xAxisNinthData.value.push(item.updateTime.slice(5, 10));
            arr.push({
              name: item.jgdMc,
              value: item.cJgz,
            });
          });
          seriesNinthData.value = [
            {
              data: arr,
              type: 'line',
              itemStyle: {
                color: '#0051FF'
              },
            }
          ];
        } else {
          let arr1 = [];
          let arr2 = [];
          chartData[0].forEach((item) => {
            xAxisNinthData.value.push(item.updateTime.slice(5, 10));
            arr1.push({
              name: item.jgdMc,
              value: item.cJgz,
            });
          });
          chartData[1].forEach((item2) => {
            arr2.push({
              name: item2.jgdMc,
              value: item2.cJgz,
            });
          });
          seriesNinthData.value = [
            {
              data: arr2,
              type: 'line',
              itemStyle: {
                color: '#91cc75'
              },
            },
            {
              data: arr1,
              type: 'line',
              itemStyle: {
                color: '#75a7d4'
              },
            },
          ];
        }
      }
      initNinthChart();
    }
  });
};
//数组分类
const sortClass = (sortData) => {
  const groupBy = (array, f) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.jgdMc; // 返回需要分组的对象
  });
  return sorted;
};
const initNinthChart = () => {
  nextTick(() => {
    let ninthChart = echarts.getInstanceByDom(document.getElementById("ninth-chart"));
    if (ninthChart != null && ninthChart != "" && ninthChart != undefined) {
      ninthChart.dispose();
    }
    ninthChart = echarts.init(document.getElementById('ninth-chart'));

    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内
        formatter: function (params) {
          let template = `${params[0].axisValue}<br>`;
          for (let i = 0; i < params.length; i++) {
            let item = params[i];
            template += item.marker + item.data.name + ': ' + item.data.value + '<br>'
            // return params[x].data.name + ':' + params[x].data.value
          }
          return template
        },
      },
      grid: {
        top: '25%',
        left: '5%',
        right: '12%',
        bottom: '10%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 60,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        name: '时间',
        data: xAxisNinthData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
      },
      yAxis: {
        type: 'value',
        name: '净高值（m）',
      },
      series: seriesNinthData.value
    };
    option && ninthChart.setOption(option);
  });
};
//桥梁动态通航净高数据
const clearHeightTrendChartStaticData = ref([]);
const clearHeightTrendChartStaticFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  clearHeightTrendChartStatic(bridge.value, regionName.value, new Date(endTime).format('yyyy-MM-dd'), new Date(time).format('yyyy-MM-dd')).then((res) => {
    if (res.code === 200 && res.data.length) {
      clearHeightTrendChartStaticData.value = res.data;
    }
  });
};

//水位监测详情
const waterlevelStationSum = ref('');
const waterlevelDetailFn = () => {
  waterlevelDetail("", "", "").then((res) => {
    if (res.code === 200 && res.data.length) {
      waterlevelStationSum.value = res.data[0].waterlevelStationSum;
    }
  });
};
const waterStation = ref("");
const waterStationData = ref([]);
const getWaterStationFn = () => {
  getWaterStation().then((res) => {
    if (res.code === 200 && res.data.length) {
      waterStation.value = res.data[0].monitorStation;
      waterStationData.value = res.data;
      trendChartFn();
    }
  });
};
const changeWaterStation = (value) => {
  waterStation.value = value;
  trendChartFn();
};
const xAxisTenthData = ref([]);
const seriesTenthData = ref([]);
const trendChartFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  trendChart(waterStation.value, new Date(endTime).format('yyyy-MM-dd'), new Date(time).format('yyyy-MM-dd')).then((res) => {
    if (res.code === 200) {
      xAxisTenthData.value = [];
      seriesTenthData.value = [];
      res.data.forEach((item) => {
        xAxisTenthData.value.push(item.reporttime.slice(5, 10));
        seriesTenthData.value.push(item.waterlevelValue);
      });
      initTenthChart();
    }
  });
};
const initTenthChart = () => {
  nextTick(() => {
    let tenthChart = echarts.getInstanceByDom(document.getElementById("tenth-chart"));
    if (tenthChart != null && tenthChart != "" && tenthChart != undefined) {
      tenthChart.dispose();
    }
    tenthChart = echarts.init(document.getElementById('tenth-chart'));

    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '12%',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        name: '时间',
        data: xAxisTenthData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
      },
      yAxis: {
        type: 'value',
        name: '水位值（m）',
      },
      series: [
        {
          data: seriesTenthData.value,
          type: 'line',
          itemStyle: {
            color: '#0051FF'
          },
        }
      ]
    };
    option && tenthChart.setOption(option);
  });
};
const isActive4 = ref("水位监测");
const changeActive4 = (val) => {
  isActive4.value = val;
};

//视频监控
const videoNumObj = ref({});
const getVideoNumFn = () => {
  getVideoNum().then((res) => {
    if (res.code === 200) {
      videoNumObj.value = res.data[0];
    }
  });
};
const videoType = ref("水上视频");
const videoTypeList = [
  { name: '船闸视频' },
  { name: '水上视频' }
];
const currentVideo = ref("");
const videoCategoryData = ref([]);
const videoTypeChange = () => {
  currentVideo.value = "";
  videoCategoryFn();
};
const videoCategoryFn = () => {
  videoCategory(
    videoType.value === "船闸视频" ? 1 : 2
  ).then((res) => {
    if (res.code === 200 && res.data) {
      videoCategoryData.value = res.data[0].children;
      currentVideo.value = videoType.value === "船闸视频" ? res.data[0].children[0].children[0].children[1].id : res.data[0].children[0].children[0].children[0].id;

      playVideoFn();
    }
  });
};
const handleNodeClick = (val) => {
  if (val.children.length === 0) {
    currentVideo.value = val.id;
    playVideoFn();
  }
};
const initVideo = () => {
  videojs("myVideo", {
    language: 'zh-CN',  //汉化
    autoplay: true, // true,浏览器准备好时开始播放
    loop: true, // 导致视频一结束就重新开始
    controls: true, //取消视频中的进度条
    muted: true, //是否静音
    preload: 'metadata', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
    textTrackDisplay: false,
    techOrder: ['html5', 'flash']
  });
};
const playVideoFn = () => {
  playVideo(currentVideo.value).then((res) => {
    if (res.code === 200 && res.data) {
      const myPlayer = videojs("myVideo");
      myPlayer.src([
        {
          type: 'application/x-mpegURL',
          src: res.data.url, //视频播放地址
        }
      ]);
      myPlayer.play();
    }
  });
};

//航道通告
const noticeData = ref([]);
const getWaterwayNoticeThreeFn = () => {
  getWaterwayNoticeThree().then((res) => {
    if (res.code === 200 && res.data.length) {
      noticeData.value = res.data;
    }
  });
};
const handleClick = (contents) => {
  let fileUrl = `${import.meta.env.VITE_APP_BASE_API}admin/file` + contents.split("/file")[1];
  window.open(fileUrl);
  // try{
  //   let reg = /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi      
  //   if(contents.match(reg)){         
  //     window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);   
  //   }else{
  //     let matchReg = /<img.*?(?:>|\/>)/gi;
  //     let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
  //     let data = [];
  //     let arr = contents.match(matchReg);
  //     arr.forEach(item => {
  //       let src = item.match(srcReg);
  //       data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`)
  //     });

  //     router.push({
  //       path: "/pdf",
  //       query: { content: data.join(',') },
  //     });
  //   }   
  // }catch(error){
  //   // alert(error)
  // }    
};

//流量流速
const lslxStaticData = ref([]);
const lslxStaticFn = () => {
  lslxStatic().then((res) => {
    if (res.code === 200 && res.data.length) {
      lslxStaticData.value = res.data;
    }
  });
};

onMounted(() => {
  document.title = "智慧航道";
  //智慧船闸
  getShipLockNumFn();
  getShipLockRateFn();
  goodsAnalysisChartFn();
  getShipLockDetailFn();
  //全省数据
  getProvinceWaterwayDataFn();
  //桥梁净高监测
  regionChartFn();
  clearHeightDetailFn();
  getAllBridgeFn();
  //水位监测
  waterlevelDetailFn();
  getWaterStationFn();
  //视频监控
  getVideoNumFn();
  videoCategoryFn();
  initVideo();
  //航道通告
  getWaterwayNoticeThreeFn();
  getYearList().then((res) => {
    if (res.code === 200 && res.data.length) {
      let arr1 = [];
      let arr2 = [];
      res.data.forEach((item, index) => {
        if (index < res.data.length - 1) {
          arr1.push(`${item.year}年`);
        }
        arr2.push(`${item.year}年`);
      });

      goodsYear1.value = arr1[arr1.length - 1];
      goodsYear2.value = arr2[arr2.length - 1];
      goodsFirstYearList.value = arr1;
      goodsSecondYearList.value = arr2;

      sluiceYear1.value = arr1[arr1.length - 1];
      sluiceYear2.value = arr2[arr2.length - 1];
      sluiceFirstYearList.value = arr1;
      sluiceSecondYearList.value = arr2;

      analysisDataFn1();
    }
  });
  // //流量流速
  //lslxStaticFn();
});
onUnmounted(() => {
  setTimeout(() => {
    const myPlayer = videojs("myVideo");
    if (myPlayer) {
      myPlayer.dispose();
    }
  }, 1000);
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../../assets/fonts/din.ttf");
}
@font-face {
  font-family: Tx;
  src: url("../../assets/fonts/tx.ttf");
}
.container {
  width: 1920px;
  height: 1080px;
  box-sizing: content-box;
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
    border-radius: 4px;
    margin: 16px 16px 0px 16px;
    padding: 0 16px;
    .title {
      width: 110px;
      height: 32px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #262626;
      line-height: 32px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      font-weight: bold;
    }
    .menu {
      display: flex;
      align-items: center;
      .item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        padding: 6px 18px;
        border-radius: 4px;
      }
      .active {
        color: #ffffff;
        background: #0051ff;
      }
    }
  }
  .main {
    box-sizing: content-box;
    height: 1024px;
    margin: 16px;
    display: flex;
    .side-content {
      margin-right: -60px;
      width: 584px;
      margin-left: 95px;
      height: 516px;
      box-sizing: content-box;
      .item {
        height: 490px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 4px;
        .top {
          height: 48px;
          line-height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          background: linear-gradient(
            90deg,
            rgba(215, 227, 255, 0.4) 0%,
            #d7e3ff 100%
          );
          .title {
            font-weight: 500;
            font-size: 18px;
            color: #595959;
            margin-right: 10px;
          }
          .more {
            font-weight: 400;
            font-size: 14px;
            color: #0051ff;
          }
          .active {
            color: #262626;
            font-weight: bold;
          }
        }
        .subtitle {
          height: 40px;
          line-height: 40px;
          font-weight: 500;
          font-size: 16px;
          color: #262626;
          border-bottom: 1px solid #f0f0f0;
          padding-left: 16px;
          margin-top: -25px;
        }
        .subtitle1 {
          height: 40px;
          line-height: 40px;
          font-weight: 500;
          font-size: 16px;
          color: #262626;
          border-bottom: 1px solid #f0f0f0;
          padding-left: 16px;
          margin-top: -40px;
        }
        .count {
          display: flex;
          justify-content: space-between;
          margin: 16px 8px 8px 8px;
          .count-item {
            margin-right: 8px;
            width: 50%;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            .icon {
              width: 32px;
              height: 32px;
              margin: 16px 8px 0px 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .info {
              margin: 8px 0;
              .name {
                color: #595959;
                font-size: 14px;
                font-weight: 500;
              }
              .value {
                font-family: "Din";
                font-weight: 800;
                font-size: 20px;
                color: #262626;
              }
            }
          }
        }
        .single-count {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border-radius: 8px;
          // border: 1px solid #f0f0f0;
          margin: 8px 16px;
          padding: 8px 16px;
          .left {
            display: flex;
            align-items: center;
            .icon {
              width: 32px;
              height: 32px;
              margin-right: 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              font-size: 16px;
              font-weight: 500;
              text-transform: none;
              margin-left: -73px;
            }
          }
          .value {
            font-family: "Din";
            font-size: 20px;
            font-weight: bold;
            padding-right: 20px;
            margin-right: 50px;
          }
        }
        .bridge-image {
          width: 432px;
          height: 130px;
          margin: 8px 0;
          padding: 0 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .video-content {
          .video-count {
            display: flex;
            justify-content: space-between;
            margin: 16px;
            .count-item {
              width: 50%;
              background: #ffffff;
              // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
              border-radius: 8px;
              // border: 1px solid #f0f0f0;
              // padding: 8px 0;
              img {
                width: 32px;
                height: 32px;
                padding-left: 16px;
              }
              .name {
                width: 84px;
                height: 17px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: rgba(38, 38, 38, 0.85);
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
              .value {
                width: 59px;
                height: 44px;
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 36px;
                color: #262626;
                line-height: 42px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
          .video-details {
            margin: 16px;
            .video-list {
              display: flex;
              margin-top: -15px;
            }
            .video {
              width: 432px;
              height: 240px;
              margin-top: 10px;
            }
          }
        }
        .notice {
          margin: 16px;
          background: #ffffff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border-radius: 8px;
          border: 1px solid #f0f0f0;
          .title {
            font-size: 14px;
            font-weight: 500;
            color: #262626;
            padding: 20px 20px 15px 20px;
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            font-size: 12px;
            font-weight: 400;
            color: #595959;
          }
        }
        .bridge-info {
          height: 46px;
          display: flex;
          flex-wrap: wrap;
          margin: 0 16px;
          .info-item {
            width: 48%;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin: 0 1%;
            color: #595959;
            .value {
              color: #262626;
            }
          }
        }
      }
    }
    .middle-content {
      width: 928px;
      height: 992px;
      margin: 0 16px;
      box-sizing: content-box;
      position: relative;
      .statistics {
        width: 280px;
        position: absolute;
        top: 16px;
        left: 16px;
        background: rgba(5, 48, 68, 0.8);
        .list {
          margin: 16px 16px 0px 16px;
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            .name {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
              line-height: 38px;
              img {
                width: 16px;
                height: 16px;
                padding-right: 4px;
              }
            }
            .value {
              font-size: 24px;
              font-weight: bold;
              color: #78dfff;
            }
          }
        }
        .point-out {
          height: 40px;
          background: rgba(4, 35, 54, 0.8);
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
          padding-left: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          img {
            width: 22px;
            height: 22px;
            padding-right: 12px;
          }
        }
      }
    }
  }
}
//智慧船舶用的是这个样式
.container {
  width: 1920px;
  height: 1080px;
  box-sizing: content-box;
  .header {
    height: 140px;
    width: 1440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
    border-radius: 4px;
    margin: 16px 16px 0px 16px;
    padding: 0 16px;
    .title {
      width: 144px;
      height: 48px;
      font-family: TENGXZTB, TENGXZTB;
      font-weight: 400;
      font-size: 36px;
      color: #262626;
      line-height: 48px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-left: 104px;
    }
    .menu {
      display: flex;
      align-items: center;
      .item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        padding: 6px 18px;
        border-radius: 4px;
      }
      .active {
        color: #ffffff;
        background: #0051ff;
      }
    }
  }
  .main {
    box-sizing: content-box;
    height: 1024px;
    margin: 16px;
    display: flex;
    .side-content {
      margin-right: -60px;
      width: 584px;
      margin-left: 95px;
      height: 516px;
      box-sizing: content-box;
      .item {
        height: 490px;
        margin-top: 34px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
        border-radius: 4px;
        .top {
          height: 48px;
          line-height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          background: linear-gradient(
            90deg,
            rgba(215, 227, 255, 0.4) 0%,
            #d7e3ff 100%
          );
          .title {
            width: 110px;
            height: 32px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #262626;
            line-height: 32px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-weight: bold;
          }
          .more {
            font-weight: 400;
            font-size: 14px;
            color: #0051ff;
          }
          .active {
            color: #262626;
            font-weight: bold;
          }
        }
        .subtitle {
          height: 40px;
          line-height: 40px;
          font-weight: 500;
          font-size: 16px;
          color: rgba(38, 38, 38, 0.85);
          border-bottom: 1px solid #f0f0f0;
          padding-left: 16px;
        }
        .count {
          display: flex;
          justify-content: space-between;
          margin: 16px 25px 8px -1px;
          .count-item {
            margin-right: 8px;
            width: 33.33%;
            display: flex;
            background: #ffffff;
            border-radius: 8px;
            .icon {
              width: 32px;
              height: 32px;
              margin: 16px 8px 0px 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .info {
              margin: 8px 0;
              .name {
                width: 84px;
                height: 17px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: rgba(38, 38, 38, 0.85);
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                white-space: nowrap;
              }
              .value {
                width: 59px;
                height: 44px;
                font-family: DIN, DIN;
                font-weight: bold;
                font-size: 36px;
                color: #262626;
                line-height: 42px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
        .pie-content {
          display: flex;
          margin-left: 54px;
          .pie-item {
            .title {
              height: 40px;
              line-height: 40px;
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              border-bottom: 1px solid #f0f0f0;
              padding-left: 16px;
            }
            .title1 {
              height: 40px;
              line-height: 40px;
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              border-bottom: 1px solid #f0f0f0;
              padding-left: 16px;
              margin-left: 55px;
            }
          }
        }
        .choice {
          .tab {
            display: flex;
            justify-content: center;
            margin: 8px 0;
            .btn {
              font-size: 12px;
              font-weight: 400;
              color: #595959;
              border: 1px solid #595959;
              padding: 6px 12px;
            }
            .active {
              color: #ffffff;
              background: #0051ff;
              border: 1px solid #0051ff;
            }
          }
          .year {
            text-align: center;
            margin-left: -1px;
            .vs {
              padding: 0 5px;
              font-size: 14px;
              font-weight: bold;
              color: #01070b;
            }
          }
        }
        .my-table {
          margin: 16px;
    margin-top: 1px;

        }
        .single-count {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #ffffff;
          border-radius: 8px;
          padding: 8px 16px;
          flex-direction: column;
          margin-right: 449px;
          white-space: nowrap;
          .left {
            display: flex;
            align-items: center;
            .icon {
              width: 32px;
              height: 32px;
              margin-right: 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              width: 84px;
              height: 17px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: rgba(38, 38, 38, 0.85);
              line-height: 14px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
          .value {
            width: 59px;
            height: 44px;
            font-family: DIN, DIN;
            font-weight: bold;
            font-size: 36px;
            color: rgba(38, 38, 38, 0.85);
            line-height: 42px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-right: -49px;
          }
        }
      }
    }
    .middle-content {
      width: 928px;
      height: 992px;
      margin: 0 16px;
      box-sizing: content-box;
      position: relative;
      .statistics {
        width: 280px;
        position: absolute;
        top: 16px;
        left: 16px;
        background: rgba(5, 48, 68, 0.8);
        .list {
          margin: 16px 16px 0px 16px;
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            .name {
              display: flex;
              align-items: center;
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
              line-height: 38px;
              img {
                width: 16px;
                height: 16px;
                padding-right: 4px;
              }
            }
            .value {
              font-size: 24px;
              font-weight: bold;
              color: #78dfff;
            }
          }
        }
        .point-out {
          height: 40px;
          background: rgba(4, 35, 54, 0.8);
          font-size: 16px;
          font-weight: 500;
          color: #ffffff;
          padding-left: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          img {
            width: 22px;
            height: 22px;
            padding-right: 12px;
          }
        }
      }
    }
  }
}

</style>